<template>
    <div class="continer">
        <div class="list">
            <img class="authImg" src="@/assets/images/auth1.png" alt="">
            <input class="authInput" type="text" placeholder="请输入姓名">
        </div>
        <div class="list">
            <img class="authImg" src="@/assets/images/auth2.png" alt="">
            <input class="authInput" type="number" placeholder="请输入手机号码">
        </div>
        <div class="list" v-if="authType==2">
            <img class="authImg" src="@/assets/images/auth3.png" alt="">
            <input class="authInput" type="text" placeholder="请输入验证码">
            <span class="getCode" v-if="!secondStatus" @click="getCode">获取验证码</span>
            <span class="getCodeA" v-else>{{second}}s</span>
        </div>
        <span class="authBtn" v-if="authType==1">修改认证信息</span>
        <span class="authBtn" v-if="authType==2">用户认证</span>
    </div>
</template>
<script>
export default {
    name: 'userAuth',
    data(){
        return {
            authType:2,//修改认证信息1  用户认证2
            secondStatus:false,//是否获取验证码
            second:60,//验证码秒数
        }
    },
    created(){
        
    },
    methods: {
        getCode(res){
            this.secondStatus = !this.secondStatus
            var secTimeInt = setInterval(()=>{
                if(this.second==1){
                    this.secondStatus = !this.secondStatus
                    this.second = 60
                    clearInterval(secTimeInt)
                }
                this.second--
            },1000)
        }
    }
}
</script>
<style lang="stylus" scoped>
.continer
  min-height 100vh
  display flex
  flex-direction column
  align-items center
  background url(../../assets/images/pgbg.jpg)
  background-size 100% auto
  background-repeat no-repeat
  padding-top 60px
  box-sizing border-box
  .list
    width 628px
    height 94px
    display flex
    align-items center
    border-bottom 1px solid #dedede;/*no*/
    box-sizing border-box
    padding-left 40px
    .authImg
        width 30px
        height 30px
        margin-right 22px
    .authInput
        font-size 24px
        flex 1
        background none
        color #ffffff
    input::input-placeholder{color:  #cacacb ;}
    ::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #cacacb; 
    } 
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #cacacb; 
    } 
    ::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #cacacb; 
    } 
    :-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #cacacb; 
    }
    .getCode
        width 180px
        height 70px
        line-height 70px
        text-align center
        border-radius 10px
        background #ce0021
        color #ffffff
        font-size 24px
        letter-spacing 1px
    .getCodeA
        width 180px
        height 70px
        line-height 70px
        text-align center
        border-radius 10px
        background #eeeeee
        color #333333
        font-size 24px
        letter-spacing 1px
.authBtn
    width 534px
    height 80px
    line-height 80px
    text-align center
    border-radius 10px
    background #ce0021
    color #ffffff
    font-size 28px
    letter-spacing 3px
    margin-top 60px


</style>
